<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flipped记事本</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/index.js"></script>
</head>

<body>
    <header>
        <hgroup>
            <h1>Flipped <span>小本本</span></h1>
            <h2>怦 - 然 - 心 - 动 我的记事小本本</h2>
        </hgroup>
        <nav>
            <div class="active todo">待办事项</div>
            <div class="notepad">记事本</div>
        </nav>
    </header>
    <main>
        <article id="todo_list">
            <section class="input_wrap">
                <input id="input_thing" type="text" placeholder="请输入待办事件">
                <button id="add_thing">添加事项</button>
            </section>
            <section class="things_wrap">
                <div class="isnull">暂无数据</div>
                <div class="things_item">
                    <div class="content_left">
                        <input type="checkbox">
                        <div class="things_content">@data</div>
                    </div>
                    <div class="delete_item">删除</div>
                </div>
                <div class="management_buttons">
                    <div class="nudone_total_num">剩余3条未完成</div>
                    <div class="buttons">
                        <div class="button_active">全部</div>
                        <div>未完成</div>
                        <div>已完成</div>
                    </div>
                    <div class="clear_done">清除已完成</div>
                </div>
            </section>
        </article>
        <article id="notepad_content">
            jishiben
        </article>
    </main>
    <footer>
        <section>
            <div>@版权所有© 猫小熊</div>
            <br>
            <div>@about 云南某高校及其热爱编程的软件工程专业大四学生</div>
        </section>
    </footer>
</body>

</html>